<template>
	<view class="warp">
		<view class="lansebeijing">
			<view class="section" v-for="(item, index) in items" :key="index" @click="ToWDiscountDetails">
				<view class="box">
					<image :src="item.image" class="placeholder" mode="aspectFill"></image>
					<view class="text-right">
						<image class="jiantou" src="/static/CarMaintenance/箭头.png" mode="aspectFill"></image>
						详情
					</view>
					<view class="text-left">
						{{item.titel}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
					image: '/static/CarMaintenance/beijing.jpg', //活动图片
					titel: '汽车惠民活动走进群众生活', //活动标题
				}, {
					image: '/static/CarMaintenance/beijing.jpg', //活动图片
					titel: '汽车惠民活动走进群众生活', //活动标题
				}]
			}
		},
		methods: {
			ToWDiscountDetails() {
				uni.navigateTo({
					url: '/pages/CarMaintenance/WDiscountDetails/WDiscountDetails'
				})
			}
		}
	}
</script>

<style>
	.lansebeijing {
		width: 100%;
		height: 300rpx;
		background-color: #3385FD;
	}

	.box {
		width: 700rpx;
		margin: 0 auto;
		border-radius: 30rpx;
		background-color: #ffffff;
		margin-bottom: 40rpx;
		padding-bottom: 40rpx;
	}

	.placeholder {
		width: 640rpx;
		margin: 30rpx;
	}

	.text-left {
		color: #515151;
		line-height: 30rpx;
		padding-left: 30rpx;
		font-size: 28rpx;
		width: 230rpx;
		/* 设置宽度 */
		white-space: nowrap;
		/* 不换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 用省略号表示超出部分 */
	}

	.text-right {
		float: right;
		color: #8a8a8a;
		font-size: 26rpx;
		padding-right: 30rpx;
		line-height: 30rpx;
	}

	.jiantou {
		width: 30rpx;
		height: 30rpx;
		float: right;
	}
</style>